import { Flex } from 'antd-mobile';
import React, { Component } from 'react';
import './search.css/banner.css';
import { getList } from '../../api';
import {withRouter} from  "react-router-dom"

class Banner extends Component {
    constructor() {
        super()
        this.state = {
            arr: []

        }
    }
    componentDidMount() {
        
        getList().then(res => {
            console.log(res)
            this.setState({
                arr: res.data.result.splice(0, 6),                   
            })

        })

    }
     handle(id){
         console.log({id:id})
         this.props.history.push('/newSing',{id:id})
     }
     go(){
         this.props.history.push('/singList')
     }
    render() {
        return (
            <div className='searchBanner'>
                <div className='searchBanner-two'>
                    <h2>新歌推荐</h2>
                    <h4 onClick={this.go.bind(this)}>新歌广场</h4>
                </div>
                {this.state.arr.map((item, i) => {
                    return (
                        
                            <div key={i} onClick={this.handle.bind(this,item.id)}>

                                <Flex className='searchBanner-one' >
                                    <Flex.Item >
                                        <img src={item.picUrl} alt="" />
                                        <span>{item.name}</span>
                                        <h5>❤{Math.round(item.playCount/10000)}万</h5>
                                    </Flex.Item>

                                </Flex>

                            </div>
                        
                    )
                })}


            </div>
        )
    }
}

export default withRouter(Banner)